<template>
    <div class="icons">
        <swiper :options="iconsOption">
            <swiper-slide v-for="(page,index) of pages">
                <router-link to="/demo" tag="div" class="icon" v-for="item of page" :key="item.id">
                    <div class="icon-img">
                        <img :src='item.imgUrl' alt="景点门票">
                    </div>
                    <p class="icon-desc">{{item.desc}}</p>
                </router-link>
            </swiper-slide>
            <!-- <swiper-slide>
                <div class="icon">
                    <div class="icon-img">
                        <img src="http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png" alt="景点门票">
                    </div>
                    <p class="icon-desc">景点门票</p>
                </div>    
            </swiper-slide> -->
             <div class="swiper-pagination"  slot="pagination"></div>
       </swiper>
    </div>
</template>

<script>
    export default{
        name:"HomeIcons",
        props:{
            list:Array
        },
        data (){
            return {
                iconsOption:{
                    pagination:".swiper-pagination",
                    // loop:true
                }
            }
        },
        computed:{
            pages (){
                const pages = []
                this.list.forEach((item,index)=>{
                    const page = Math.floor(index/8)
                    if(!pages[page]){
                        pages[page] = []
                    }
                    pages[page].push(item)
                })
                return pages
            }
        }
    }
</script>

<style lang="stylus" scoped>
@import '~styles/varibles.styl'
@import '~styles/mixins.styl'

.icons >>> .swiper-container 
    height: 0
    padding-bottom:58%
    .icon
        position relative
        overflow hidden
        float left
        width:25%
        height 0
        padding-bottom:25%
        .icon-img
            position absolute
            top 0
            left 0
            right 0
            bottom 0.44rem
            box-sizing:border-box
            padding:0.1rem
            img 
                display block
                height 100%
                margin 0 auto
        .icon-desc
            position absolute
            left 0
            right 0
            bottom 0
            height 0.5rem  
            line-height:0.5rem
            text-align center
            ellipsis()
            color:$darkTextColor


</style>
